<template>
    <div class="header clear">
        <div class="top-box">
            <div class="main clear">
                <div class="bar-left">
                    <span>您好,欢迎来到易发彩票!现在是</span>
                    <label id="nowTime" class="now-time">09:28</label>
                </div>
                <div class="bar-left">
                    <div class="fright">
                        <div>
                            <router-link v-bind:to="{path:`/login`}">请登录</router-link>
                            <router-link v-bind:to="{path:`/reg`}" class="agent-tit">免费注册</router-link>
                        </div>
                    </div>

                </div>
                <div class="bar-right">
                    <a href="https://static.meiqia.com/dist/standalone.html?_=t&amp;eid=119857" target="_blank">在线客服</a>|
                    <a href="javascript:;" onclick="AddFavorite('易发彩票彩票')">添加收藏</a>
                </div>
            </div>
        </div>
        <div class="head">
            <div class="head-main ">
                <div class="header-in clear content">
                    <div class="logo left">
                        <router-link v-bind:to="{path:`/login`}"  style="display:block;height:100%;width:100%;">
                            <img src="https://066981.com/upload/default/20180829/2a7d2f4a886abaf5391d5443d88ced9f.png">
                        </router-link>
                    </div>
                    <!--div class="preson-info">
                        <span class="acc-person">
                            <strong class="account_hidden">您好，</strong><label class="value account_name">qq123456&nbsp;<span class="grade">vip8</span></label>
                        </span>
                        <span class="acc-balance">
                            <strong>余额:</strong>
                            <label id="Balance" style="color:#e4393c;">1089156.418</label>
                            <i class="refresh" onclick="refreshBalance()"></i>
                        </span>
                        <div class="info">
                            <a title="用户中心" class="btn_user" href="/user_center">用户中心</a>
                            |<a title="充值" class="btn-navacc-deposit" href="/user_recharge">充值</a>
                            |<a title="提现" class="jGetMoney btn-navacc btn-navacc-withdraw btn-navacc-withdraw">提现</a>
                            |<a title="交易记录" class="btn_report" href="/user_betRecord">交易记录</a>
                            |<a title="个人消息" class="btn_notice" href="/user_notice">个人消息</a>
                            |<a title="退出" class="btn-login-out" href="/user_logout">退出</a>
                        </div>
                    </div-->
                    <div class="header-right right">
                        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                            <FormItem prop="user">
                                <Input type="text" v-model="formInline.user" placeholder="用户名">
                                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                                </Input>
                            </FormItem>
                            <FormItem prop="password">
                                <Input type="password" v-model="formInline.password" placeholder="密码">
                                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                                </Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
                                <Button type="warning">免费开户</Button>
                            </FormItem>
                        </Form>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="menu-box">
            <div class="menu clear">
                <div class="lottery-plus " :class="submenu?'submenu':''"  id="lotterys">
                    <h2 class="all-games">
                        选择彩种
                        <a class="dropdown-desc"><i class="icon arrow"></i></a>
                    </h2>
                    <div class="lotterys-list-hd" id="lotterysList">
                        <ul class="lottery-list-box" id="lottery-list-box">
                            <li class="mainGame">
                                <router-link v-bind:to="{path:`/login`}">
                                <img src="https://066981.com/upload/default/20180714/4505e9b3ac295648b842e9693621d84e.png" style="width: 35px;height: 35px;margin:0px 10px 0 10px;" alt="jsk3">
                                <span class="color333">江苏快3</span>
                                </router-link>
                            </li>
                            
                        </ul>
                    </div>
                </div>
                <Menu mode="horizontal" theme="primary" :active-name="active" class="nav-plus">
                    <MenuItem name="1">
                        <Icon type="ios-home" />
                        首页
                        <router-link v-bind:to="{path:`/home`}"></router-link>
                    </MenuItem>
                    <MenuItem name="2">
                        <Icon type="ios-paper" />
                        购彩大厅
                        <router-link v-bind:to="{path:`/hall`}"></router-link>
                    </MenuItem>
                    
                    <MenuItem name="3">
                        <Icon type="md-phone-portrait" />
                        <Badge text="hot" type="warning">
                            <div class="nav_link">手机购彩</div>
                        </Badge>
                        <router-link v-bind:to="{path:`/mobile`}"></router-link>
                    </MenuItem>
                    
                    <MenuItem name="4">
                        <Icon type="md-megaphone" />
                        平台公告
                    </MenuItem>
                    <MenuItem name="5">
                        <Icon type="ios-stats" />
                        走势图表
                    </MenuItem>
                    <MenuItem name="6">
                        <Icon type="md-basket" />
                        优惠活动
                        <router-link v-bind:to="{path:`/activity`}"></router-link>
                    </MenuItem>
                    <MenuItem name="7">
                        <Icon type="ios-mail-open" />
                        资讯
                        <router-link v-bind:to="{path:`/news`}"></router-link>
                    </MenuItem>
                </Menu>
            </div>
        </div>
    </div>
</template>

<script>
import {Menu,MenuItem,Icon,Badge,Form,FormItem,Input,Button} from 'iView'
export default {
    name: 'homeHeader',
    props:{
        "submenu":[Boolean],
        "active":[String]
    },
    data(){
        return{
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
                ]
            }
        }
    },
    components:{
        Menu,MenuItem,Icon,Badge,Form,FormItem,Input,Button
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('登陆中...');
                } else {
                    this.$Message.error('错误，重新登陆');
                }
            })
        }
    }
}
</script>

<style scoped>

/*头部-主体菜单*/
.menu-box {
    background: #f13131;
    z-index: 1000;
    float: left;
    width: 100%;
    height: 45px;
    position: relative;
}
.menu-box .menu {
    width: 1000px;
    margin: 0 auto;
}
/*左侧侧边栏菜单*/
.lottery-plus {
    float: left;
    width: 230px;
    position: relative;
}
.lottery-plus h2 {
    width: 230px;
    background: #d92c2c;
    height: 45px;
    color: #fff;
    font: 16px/45px 'Microsoft Yahei';
    text-align: center;
}
.dropdown-desc{
    display: none;
}
.submenu .dropdown-desc{
    display: inline-block;
}
.submenu:hover .dropdown-desc i{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.dropdown-desc i {
    width: 9px;
    height: 5px;
    background-position: -183px -215px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 5px;
    -webkit-transition: -webkit-transform .2s ease-in;
    -moz-transition: -moz-transform .2s ease-in;
    -ms-transition: -ms-transform .2s ease-in;
    -o-transition: -o-transform .2s ease-in;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.arrow{
    background: url("https://066981.com/themes/simpleboot3/public/assets/static/images/base-ico2.png?f989dbe577") no-repeat;
}
.lotterys-list-hd {
    width: 228px;
    overflow: hidden;
    border: 1px solid #EDEDED;
    border-top: 0;
    background: #f8f8f8;
    position: absolute;
    left: 0;
    top: 45px;
    z-index: 100;
    display: none;
}
.lotterys-list-hd .lottery-list-box {
    position: relative;
    z-index: 2;
}
.submenu:hover .lotterys-list-hd{
    display: block;
}
.menu .mainGame i.nav01 img {
    margin-top: 10px!important;
}
.menu-box ul {
    background-image: none;
}
.mainGame, .myGames {
    border-bottom: 1px dashed #D1D1D1;
    line-height: 56px;
    margin: 0 10px;
}
.mainGame {
    height: 55px;
    position: relative;
    text-align: left;
}
.mainGame a img{
    vertical-align: middle;
}
.mainGame a {
    display: inline-block;
}
.mainGame span.color333 {
    font-size: 14px;
    margin-right: 10px;
    color: #333;
}
.menu .mainGame i.nav01 {
    background-position: -2px -497px;
}
.menu .mainGame i.nav01 img {
    margin-top: 10px!important;
}
/*主菜单*/
.nav-plus {
    float: left;
    width: 770px;
    height: 45px;
    line-height: 45px;
    background: #f13131;
}
.ivu-menu-primary.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-primary.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-primary.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-primary.ivu-menu-horizontal .ivu-menu-submenu:hover{
    background: #d92c2c
}
.nav-plus .ivu-menu-item{
    padding: 0 10px;
    font-size: 12px;
}
.ivu-menu-item a{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/*头部-顶部盒子*/
.top-box .main > * {
    display: inline-block;
    vertical-align: middle;
}
.clear:after {
    clear: both;
}
.top-box {
    position: relative;
    width: 100%;
    z-index: 30;
    padding: 0;
    line-height: 34px;
    background: #f5f5f5;
}
.top-box .main {
    height: 34px;
    text-align: right;
    width: 1000px;
}
.clear:before, .clear:after {
    content: "";
    display: table;
}

.bar-left {
    height: 34px;
    font-size: 12px;
    overflow: hidden;
    float: left;
    color: #000;
}
.bar-left .fright {
    margin-left: 18px;
}
.bar-left a {
    color: #2874f3;
}
.top-box a {
    padding: 0 5px;
}
.top-box a.agent-tit {
    color: #f00;
    animation: twinkling 0.5s infinite ease-in-out;
    -moz-animation: twinkling 0.5s infinite ease-in-out;
    -webkit-animation: twinkling 0.5s infinite ease-in-out;
    -o-animation: twinkling 0.5s infinite ease-in-out;
}
.bar-right {
    padding: 0;
    width: auto;
    text-align: left;
    position: relative;
    vertical-align: middle;
}
/*动画*/
@keyframes twinkling
{
0% {color: #fff;}
100%{color:red}
}
/*头部-logo-登陆*/
.head {
    z-index: 1009;
    border-bottom: 1px solid #d1bfa5;
}
.head-main {
    position: relative;
    background: #fff;
}
.header-in {
    width: 1000px;
}
.logo {
    position: relative;
    width: 212px;
    height: 96px;
}
.header-right{
    margin-top: 32px;
}
/*登录后-用户信息*/
.preson-info {
    float: right;
    margin-top: 15px;
    font-weight: bold;
    white-space: nowrap;
    font-size: 14px;
    height: 74px;
    text-align: right;
    line-height: 36px;
    width: 560px;
}
.preson-info span {
    padding: 0 2px;
    margin-right: 15px;
}
.preson-info strong {
    font-size: 12px;
}
.grade {
    font-size: 13px;
    padding: 3px 5px;
    border-radius: 4px;
    color: #fff;
    background-color: #f0bd5e;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
}
.acc-balance label {
    margin: 0 5px;
}
.acc-balance i {
    display: inline-block;
    width: 12px;
    height: 16px;
    cursor: pointer;
    background-position: -3px -280px;
    vertical-align: sub;
    transform-origin: center;
    background: url(https://066981.com/themes/simpleboot3/public/assets/Content/mapping/jiucai/images/base-ico2.png?f989dbe577) no-repeat;
}
.preson-info .info a {
    padding: 0 15px;
    cursor: pointer;
}
</style>

